<template>
    <view class="page_main">
        <HeaderBar title="账单详情"></HeaderBar>
        <view class="list">
            <view class="item">
                <view class="content">
                    <img class="img" :src="dataInfo.headImgUrl" alt="">
                    <view class="info">
                        <view class="text">
                            <view class="title">九寨黄龙5日游</view>
                            <view class="txt">成人1儿童1</view>
                            <view class="txt memo">九寨黄龙5日游九寨黄龙5日游九寨黄龙5日游九寨黄龙5日游</view>
                            <view class="txt">出发日期：{{ dataInfo.useDate }}</view>
                        </view>
                        <view class="price_status">
                            <view class="price">￥<text>1115</text></view>
                            <view class="status">退款中</view>
                        </view> 
                    </view>
                </view>
                <view class="btns">
                    <button class="btn">查看详情</button>
                    <button class="btn">撤销退款</button>
                </view>    
            </view>
        </view>
        <view class="contact">
            <button class="btn"><i class="iconfont icon-kefu"></i>联系客服</button>
        </view>
          
    </view>
</template>

<script setup>
import { ref, onMounted , computed, reactive } from 'vue'
import HeaderBar from "@/components/HeaderBar/index.vue";
import {onLoad} from "@dcloudio/uni-app";
import { orderRefundQuery ,refundOrderInfo } from "@/premiumRouteSubPack/api/index";

const dataInfo = ref({
  id: '',
  useDate: '',
  headImgUrl: '',
});
const status = [
    {label:'退款中',key:0},
    {label:'已退款',key:1},
    {label:'已取消',key:2},
]
onLoad((options) => {  
  try {
    const data = JSON.parse(decodeURIComponent(options.data || '{}'));
    dataInfo.value = {
      ...data,
    };
  } catch (error) {
    uni.showToast({ title: '数据加载失败', icon: 'none' });
    uni.navigateBack();
  }
  getRefundList()
});
//获取退款详情
const getRefundList =(id) => {
      const myOrderClientRefund = {
        //   orderId:dataInfo.value.id,
          orderId:'P2505090000000000010',
          orderType:5,
      }
      console.log(myOrderClientRefund,'...........');
      
    refundOrderInfo(myOrderClientRefund).then((res)=>{

        console.log(res,'-------');
    })
};
</script>

<style lang="scss" scoped>
.page_main{
    height: 100vh;
    background: #eeefe7;
    .list{
        padding: 15rpx 28rpx;
        .item{
            margin-top: 15rpx;
            background: #fff;
            border-radius: 10rpx;
            padding: 30rpx 28rpx;
            .content{
                display: flex;
                .img{
                    width: 125rpx;
                    height: 125rpx;
                    border-radius: 10rpx;
                    margin-right: 28rpx;
                    background: red;
                }
                .info{
                    display: flex;
                    justify-content: space-between;
                    flex: 1;
                    .text{
                        .title{
                            font-size: 25rpx;
                            font-weight: bold;
                            margin-bottom: 5rpx;
                        }
                        .txt{
                            font-size: 22rpx;
                            color: #777777;
                        }
                        .memo{
                            width: 300rpx;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                    }
                    .price_status{
                        font-size: 25rpx;
                        color: #AA5413;
                        text-align: right;
                        .price{
                            margin-bottom: 12rpx;
                            text{
                                font-size: 32rpx;
                            }
                        }
                        .status{}
                    }
                }
            }
            .btns{
                display: flex;
                justify-content: flex-end;
                margin-top: 29rpx;
                .btn{
                    width: 144rpx;
                    height: 41rpx;
                    line-height: 41rpx;
                    margin: 0;
                    padding: 0;
                    font-size: 25rpx;
                    background: #EFEFED;
                    border-radius: 10rpx;
                    margin-left: 20rpx;
                    &:nth-child(2){
                        color: #fff;
                        background: #1B9C61 ;
                    }
                }
            }
        }
    }
    .contact{
        padding: 32rpx;
        width: 100%;
        box-sizing: border-box;
        background: #fff;
        position: fixed;
        bottom: 0;
        left: 0;
        padding-bottom: env(safe-area-inset-bottom);
        .btn{
            height: 84rpx;
            line-height: 84rpx;
            color: #fff;
            border-radius: 10rpx;
            background: #1B9C61;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 29rpx;
            .icon-kefu{
                margin-right: 12rpx;
            }
        }
    }
}
</style>